<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>类</title>
     <style>
         .b1{
             width: 100px;
             height: 100px;
             background-color: red;
         }
         .b2{
             width: 200px;
             height: 200px;
             background-color: aqua;
         }
     </style>
    <script>
        window.onload=function (){
            var btn1=document.getElementById("btn1");
            var box=document.getElementById("box");
            /*
            通过修改class的属性间接修改样式，高性能
             */
            btn1.onclick=function (){
            box.className="b2";}

        }
    </script>
</head>
<body>
<button id="btn1">点击按钮修改box样式</button>
<div id="box" class="b1"></div>
</body>
</html>